<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script
	src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<script type="text/javascript"
	src="${APP_PATH}/static/jquery/jquery-3.4.1.js"></script>
<link rel="stylesheet" type="text/css"
	href="${APP_PATH}/static/bootstrap/css/bootstrap.css" />
<title>统计</title>
</head>
<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

	<div id="main1"
		style="width: 600px; height: 400px; margin-left: 100px; margin-top: 100px; border: solid 1px; color: red; float: left;"></div>

	<div id="main2"
		style="width: 600px; height: 400px; margin-right: 100px; margin-top: 100px; border: solid 1px; color: red; float: right;"></div>
	<div style="clear: both;"></div>
	<div style="margin-top: 100px; text-align: center; float:;">
		<button class="btn" type="button" onclick="javascript:history.back()">返回</button>
	</div>
	<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main1'));
				myChart.showLoading({
					text : "图表正在努力加载中"
				});
				// 指定图表的配置项和数据
				option = {
					title : {
						text : '部门员工分布饼状图',
						
					},
					tooltip : {
						trigger : 'item',
						formatter : '{a} <br/>{b}: {c} ({d}%)'
					}
				};
				var names=[];
				
				$.ajax({
	                type : "post",
	                async : true,
	                url : "${APP_PATH}/dept/findEmpNums",
	               
	                dataType : "json",        //返回数据形式为json
	                success : function(result) {       	
	                	//请求成功时执行该函数内容，result即为服务器返回的json对象
	                	for(var i=0;i<result.data.length;i++){
	                        names.push(result.data[i].name);    //挨个取出类别并填入类别数组
	                    }
	                	console.log(result.data);
	                	myChart.hideLoading();    //隐藏加载动画
	                    myChart.setOption({        //加载数据图表
	                        legend: {
	                            orient: 'vertical',
	                            top:50,
	            				left : 10,
	                            data:names
	                        },
	                        series : [
	                            {
	                            	name : '部门名称',
	                				type : 'pie',
	                				radius : [ '50%', '70%' ],
	                				avoidLabelOverlap : false,
	                				label : {
	                					normal : {
	                						show : false,
	                						position : 'center'
	                					},
	                					emphasis : {
	                						show : true,
	                						textStyle : {
	                							fontSize : '30',
	                							fontWeight : 'bold'
	                						}
	                					}
	                				},
	                				labelLine : {
	                					normal : {
	                						show : false
	                					}
	                				},
	                                data:result.data,
	                                itemStyle: {
	                                    emphasis: {
	                                        shadowBlur: 10,
	                                        shadowOffsetX: 0,
	                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
	                                    }
	                                }
	                            }
	                        ]
	                    });
	                },error : function(errorMsg) {
			            //请求失败时执行该函数
			            alert("图表请求数据失败!");
			            myChart.hideLoading();
			        }
	               
	            });
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			</script>


	<script type="text/javascript">
			var barChart=echarts.init(document.getElementById('main2'));
			barChart.showLoading({
				text : "图表正在努力加载中"
			});
			
			option = {
				    title: {
				        text: '部门员工总人数',
				        /*subtext: '数据来自网络'*/
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    }
				    
			};
				    var names2=[];
					
					$.ajax({
		                type : "post",
		                async : true,
		                url : "${APP_PATH}/dept/findEmpNums",
		               
		                dataType : "json",        //返回数据形式为json
		                success : function(result) {       	
		                	//请求成功时执行该函数内容，result即为服务器返回的json对象
		                	for(var i=0;i<result.data.length;i++){
		                        names2.push(result.data[i].name);    //挨个取出类别并填入类别数组
		                    }
		  barChart.setOption({        //加载数据柱状图图表
				    
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
				        boundaryGap: [0, 0.01]
				    },
				    yAxis: {
				        type: 'category',
				        data: names2
				    },
				    series: [
				        {
				            name: '总数',
				            type: 'bar',
				            data: result.data
				        }
				    ]
				
		                	 }); 
		                }
					});
			
			barChart.hideLoading();    //隐藏加载动画
			barChart.setOption(option);
			
			</script>




</body>
</html>